<template>
  <div class="layout">
    <Nuxt />
    <div class="loading_container" v-if="$nuxt.$store.state.loading">
      <van-overlay
        :show="$nuxt.$store.state.loading"
        z-index="9999"
        :custom-style="{ background: 'rgba(255,255,255,0)' }"
      >
        <div class="wrapper">
          <van-loading type="spinner" color="var(--text-color)" />
        </div>
      </van-overlay>
    </div>
  </div>
</template>
<script>
export default {
  mounted () {
    // console.log($nuxt.$store.state.loading);
    //阻止safari浏览器双击放大功能
    let lastTouchEnd = 0 //更新手指弹起的时间
    document.documentElement.addEventListener('touchstart', function (event) {
      //多根手指同时按下屏幕，禁止默认行为
      if (event.touches.length > 1) {
        event.preventDefault()
      }
    })
    document.documentElement.addEventListener(
      'touchend',
      function (event) {
        let now = new Date().getTime()
        if (now - lastTouchEnd <= 300) {
          //当两次手指弹起的时间小于300毫秒，认为双击屏幕行为
          event.preventDefault()
        } else {
          // 否则重新手指弹起的时间
          lastTouchEnd = now
        }
      },
      false
    )
    //阻止双指放大页面
    document.documentElement.addEventListener('gesturestart', function (event) {
      event.preventDefault()
    })
    window.vm = this.$i18n
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100vh;
  font-size: 62.5%;
  // font-family: eurofonc;
  font-weight: 400;
  color: #39404d;
  word-break: break-word;
  overflow: hidden;
  overflow-y: auto;
  // background-color: #000000;
  font-family: 'SF Pro Display', 'SF Pro Display-Medium', 'Poppins',
    'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial',
    sans-serif;
}

html {
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

// 禁用样式
.disabled {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  pointer-events: none;
}

.show {
  display: block !important;
}

.hide {
  display: none !important;
}

.loading_container {
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: absolute;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 9999;
  }
}
</style>
